<!doctype html>

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />

    <title>vaadin-grid</title>

    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>

    <link rel="import" href="../all-imports.html">
    <link rel="import" href="../../paper-checkbox/paper-checkbox.html">
    <link rel="import" href="../../paper-input/paper-input.html">
    <link rel="import" href="../demo/x-data-provider.html">

    <style>
      body,
      html {
        padding: 0;
        margin: 0;
      }
    </style>
  </head>

  <body>
    <x-data-provider></x-data-provider>
    <dom-module id="x-app">
      <template>
        <style>
          :host {
            display: block;
            height: 100vh;
            position: relative;
            padding: 20px;
            box-sizing: border-box;
          }

          vaadin-grid {
            height: 100%;
          }
        </style>
        <input value="{{foobar::input}}">
        <label>[[foobar]]</label>
        <vaadin-grid id="component" item-id-path="name.first" data-provider="[[treeDataProvider]]" multi-selection column-reordering-allowed>

          <template class="row-details">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
              dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <div>details-[[index]]-[[item.name]]</div>
            <button>Howdy</button>
            <paper-input value="{{item.name.last}}"></paper-input>
          </template>

          <vaadin-grid-selection-column auto-select frozen>
          </vaadin-grid-selection-column>

          <vaadin-grid-column width="145px" flex-grow="0" frozen resizable>
            <template class="header">
              Index
            </template>
            <template>
              <vaadin-grid-tree-toggle
                  level="[[level]]"
                  leaf="[[!item.hasChildren]]"
                  expanded="{{expanded}}">
                [[index]]
              </vaadin-grid-tree-toggle>
            </template>
          </vaadin-grid-column>

          <vaadin-grid-column-group resizable>

            <template class="header">
              TG1
            </template>
            <template class="footer">
              TGF1
            </template>

            <vaadin-grid-column width="300px" flex-shrink="1" flex-grow="0">
              <template>
                <span class="elItem">[[item.name.first]]</span>
              </template>
              <template class="header">
                <vaadin-grid-sorter path="name.first">TC1</vaadin-grid-sorter>
              </template>
              <template class="footer">
                TCF1
              </template>
            </vaadin-grid-column>

            <vaadin-grid-column-group>

              <template class="header">
                Waat
              </template>

            <vaadin-grid-column width="300px" flex-shrink="1" flex-grow="0">
              <template>
                <span class="elItem">[[item.name.first]]</span>
              </template>
              <template class="header">
                <vaadin-grid-sorter path="name.first">TC1</vaadin-grid-sorter>
              </template>
              <template class="footer">
                TCF1
              </template>
      </vaadin-grid-column>

            <vaadin-grid-column width="20%">
              <template>
                <paper-input value="{{item.name.last}}"></paper-input>
              </template>
              <template class="header">
                <vaadin-grid-sorter path="name.last">
                  <vaadin-grid-filter path="name.last"></vaadin-grid-filter>
                </vaadin-grid-sorter>
              </template>
              <template class="footer">
                <vaadin-grid-filter path="name.last"></vaadin-grid-filter>
              </template>
      </vaadin-grid-column>

            </vaadin-grid-column-group>

          </vaadin-grid-column-group>

          <vaadin-grid-column-group>
            <vaadin-grid-column width="200px" resizable>
              <template>
                <div>[[item.name.first]].[[item.name.last]]@gmail.com</div>
              </template>
              <template class="header">
                TC3
              </template>
            </vaadin-grid-column>

            <vaadin-grid-column-group>
              <vaadin-grid-column width="200px">
                <template>
                  [[item.username]]
                </template>
                <template class="header">
                  <vaadin-grid-sorter path="username">TC1</vaadin-grid-sorter>
                </template>
              </vaadin-grid-column>
              <vaadin-grid-column width="100px">
                <template>
                  <!-- <progress value="[[index]]" max="25"></progress> -->
                </template>
                <template class="header">
                  TC5
                </template>
              </vaadin-grid-column>
              <vaadin-grid-column width="100px">
                <template>
                  <paper-checkbox checked="{{detailsOpened}}">Details</paper-checkbox>
                </template>
                <template class="header">
                  TC6
                </template>
              </vaadin-grid-column>
              <template class="header">
                <vaadin-grid-filter path="username"></vaadin-grid-filter>
              </template>
            </vaadin-grid-column-group>
            <template class="header">
              TG2
            </template>
          </vaadin-grid-column-group>
        </vaadin-grid>
        <input>
      </template>
      <script>
        window.addEventListener('WebComponentsReady', () => {

          // const dataBase = [
          //   {name: {first: 'foo-0', last: 'bar-0'}},
          //   {name: {first: 'foo-1', last: 'bar-1'}, hasChildren: true, children: [
          //     {name: {first: 'foo-1-0', last: 'bar-1-0'}},
          //     {name: {first: 'foo-1-1', last: 'bar-1-1'}},
          //     {name: {first: 'foo-1-2', last: 'bar-1-2'}},
          //   ]},
          //   {name: {first: 'foo-2', last: 'bar-2'}},
          //   {name: {first: 'foo-3', last: 'bar-3'}},
          // ];

          function generateItem(parentLevels, index) {
            const levelPrefix = Array(...new Array(parentLevels.length)).map(() => '🔳 ').join('');
            const levels = parentLevels.concat(index);

            const item = {
              name: {
                first: `${levelPrefix}foo-${levels.join('-')}`,
                last: `${levelPrefix}bar-${levels.join('-')}`
              }
            };

            item.hasChildren = parentLevels.length < 3 && index % 3 === 2;

            if (item.hasChildren) {
              const childrenCount = 5;
              item.children = Array(...new Array(childrenCount))
                .map((v, i) => generateItem(levels, i));
            }

            return item;
          }

          const dataBase = Array(...new Array(1000)).map((v, i) => generateItem([], i));
          window.dataBase = dataBase;

          class XApp extends Polymer.Element {
            static get is() {
              return 'x-app';
            }

            static get properties() {
              return {

                treeDataProvider: {
                  value: function() {
                    return this.treeDataProvider.bind(this);
                  }
                }
              };
            }

            treeDataProvider(params, cb) {
              const parentItem = params.parentItem;
              const array = parentItem ? parentItem.children : dataBase;
              const pageOffset = params.page * params.pageSize;
              cb(
                array.slice(
                  pageOffset, // start
                  pageOffset + params.pageSize // end
                ),
                array.length
              );
            }

            ready() {
              super.ready();
              this.$.component.size = dataBase.length;
            }
          }
          window.customElements.define(XApp.is, XApp);
        });
    </script>
    </dom-module>

    <x-app></x-app>

  </body>
</html>
